<!--
 * @Descripttion: js
 * @Version: 1.0
 * @Author: name
 * @Date: 2021-03-03 20:03:20
 * @LastEditors: name
 * @LastEditTime: 2021-03-03 20:12:40
-->
<template>
  <div class="address-update-page">
    <van-nav-bar title="地址编辑"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-address-edit :area-list="state.areaList"
                      show-postal
                      show-delete
                      show-set-default
                      show-search-result
                      :address-info="state.AddressInfo"
                      :search-result="state.searchResult"
                      :area-columns-placeholder="['请选择', '请选择', '请选择']"
                      @save="onSave"
                      @delete="onDelete"
                      @change-detail="onChangeDetail" />
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "AddressList",
  setup () {
    const { go, push } = useRouter();
    const { query } = useRoute();
    const state = reactive({
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          110200: "县",
          120100: "天津市",
          120200: "县",
        },
      },
      searchResult: [],
      AddressInfo: {
        id: query.id || "",
        name: query.name || "",
        tel: query.tel || "",
        province: query.province || "",
        city: query.city || "",
        county: query.county || "",
        addressDetail: query.address || "",
        areaCode: query.areaCode || "",
        postalCode: query.postalCode || "",
        isDefault: query.isDefault || "",
      },
    });
    const onClickLeft = () => {
      go(-1);
    };
    const onSave = (val) => {
      console.log(val);
    };
    const onDelete = () => { };
    const onChangeDetail = (val) => {
      if (val) {
        state.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        state.searchResult = [];
      }
    };
    return {
      state,
      onClickLeft,
      onSave,
      onDelete,
      onChangeDetail,
    };
  },
};
</script>
<style lang="less" scoped>
.address-update-page {
  .van-nav-bar {
    ::v-deep(.van-icon),
    ::v-deep(.van-nav-bar__text) {
      color: #333;
    }
  }
}
</style>